<template>
	<div class="page-container detail-container">
		<div v-show="$route.name === 'memberDetail'">
			<h3 class="detail-sub-title">基本信息</h3>
			<el-row :gutter="20">
				<el-col :span="8">
					用户ID
					<span class="detail-value">{{baseInfo.memberId}}</span>
				</el-col>
				<el-col :span="8">
					用户昵称
					<span class="detail-value">{{baseInfo.nickName}}</span>
				</el-col>
				<el-col :span="8">
					手机号
					<span class="detail-value">{{baseInfo.cellphone}}</span>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="8">
					用户类型
					<span class="detail-value">{{MEMBER_TYPE[baseInfo.memberType]}}</span>
				</el-col>
				<el-col :span="8">
					用户注册时间
					<span class="detail-value">{{baseInfo.registerDate | dateFrm}}</span>
				</el-col>
			</el-row>
			<h3 class="detail-sub-title">已开通权益</h3>
			<el-table class="el-table-modify" border :data="equityList">
				<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
				<el-table-column label="权益产品名称" prop="productName" align="center"></el-table-column>
				<el-table-column label="权益品牌" prop="brandName" align="center"></el-table-column>
				<el-table-column label="权益状态" prop="privilegeStatus" align="center">
					<template slot-scope="scope">
						{{scope.row.active ? '激活' : '未激活'}}
					</template>
				</el-table-column>
				<el-table-column label="权益销售渠道" prop="saleWay" align="center"></el-table-column>
				<el-table-column label="权益开通时间" prop="openedDate" align="center">
				</el-table-column>
				<el-table-column label="权益激活时间" prop="activeDate" align="center">
				</el-table-column>
				<el-table-column label="权益到期时间" prop="expireDate" align="center">
				</el-table-column>
				<el-table-column label="支付金额" prop="paymentAmount" align="center"></el-table-column>
				<el-table-column label="下单时间" prop="orderTime" align="center">
				</el-table-column>
				<el-table-column label="权益使用次数" prop="usedQuantity" align="center"></el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="72">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="linToDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<h3 class="detail-sub-title">已添加银行</h3>
			<el-table class="el-table-modify" border :data="bankCardList">
				<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
				<el-table-column label="持卡人" prop="holderName" align="center"></el-table-column>
				<el-table-column label="卡号" prop="cardNum" align="center"></el-table-column>
				<el-table-column label="银行" prop="bankName" align="center"></el-table-column>
				<el-table-column label="身份证号" prop="idCardNum" align="center"></el-table-column>
				<el-table-column label="手机号" prop="cellphone" align="center"></el-table-column>
				<el-table-column label="有效期" prop="expireDate" align="center">
					<!-- <template slot-scope="scope">{{scope.row.expireDate | date}}</template> -->
				</el-table-column>
				<el-table-column label="绑定时间" prop="bindDate" align="center">
					<!-- <template slot-scope="scope">{{scope.row.bindTime | dateFrm}}</template> -->
				</el-table-column>
			</el-table>
		</div>
		<router-view v-if="$route.name !== 'memberDetail'"></router-view>
	</div>
</template>
<script>
import {membersProfile, membersPrivileges, membersBankcards} from '@/api/member';
import {MEMBER_TYPE} from '@/utils/const';
export default {
	name: "MemberDetail",
	data() {
		this.MEMBER_TYPE = MEMBER_TYPE;

		return {
			baseInfo: {},
			equityList: [],
			bankCardList: [
      ]
		};
	},
	methods: {
		async requestProfile(id) {
			try {
				const {data} = await membersProfile(id)
				this.baseInfo = data;
			} catch (error) {
				console.log(error);
			}
		},
		async requestPrivileges(id) {
			try {
				const {data} = await membersPrivileges(id)
				this.equityList = data;
			} catch (error) {
				console.log(error)
			}
		},
		async requestBankcards(id) {
			try {
				const {data} = await membersBankcards(id);
				this.bankCardList = data;
			} catch (error) {
				console.log(error)
			}
		},
    linToDetail(row) {
      this.$router.push({
				name: 'memberEquityDetail',
				params: {
					id: row.memberId
				}
			})
    }
	},
	created() {
		if (this.$route.name === 'memberDetail') {
      let {id} = this.$route.params;
      if (id) {
				this.requestProfile(id);
				this.requestPrivileges(id);
				this.requestBankcards(id);
      } else {
        this.$router.go(-1);
      }
    }
	}
};
</script>

<style>
</style>